<template>
  <div class="gray-page resident-detail-page">
    <nav-bar title="工作计划"></nav-bar>
    <div class="page-main">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form input-align="right" :label-width="120">
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.taskName"
            label="任务名称"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            rows="4"
            autosize
            label="任务描述"
            type="textarea"
            maxlength="500"
            required
            v-model="formParams.taskDescribe"
          />
          <van-field
            readonly
            required
            class="van-field__value--upload"
            label-class="van-cell__title_gray"
            label="图片/视频"
          >
            <template #input>
              <van-uploader
                name="fileList"
                v-model="fileList"
                :show-upload="false"
                :deletable="false"
                @click-preview="previewClick"
              >
                <template #preview-cover="file">
                  <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                    <div class="van-uploader__preview-masker"></div>
                    <video-player
                      class="video-player vjs-custom-skin"
                      :playsinline="true"
                      :options="{
                        aspectRatio: '16:16',
                        preload: 'auto',
                        sources: [
                          {
                            src: file.url
                          }
                        ]
                      }"
                    ></video-player>
                  </template>
                </template>
              </van-uploader>
            </template>
          </van-field>
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.taskPriorityName"
            label="优先级"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.deadline"
            label="截止时间"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.taskStatusName"
            label="状态"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.finishTime"
            label="完成时间"
          />
        </van-form>
      </van-sticky>
    </div>
    <!-- 视频预览 -->
    <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video>
  </div>
</template>

<script>
import Routine from '@/api/routine'
export default {
  data() {
    return {
      formParams: {},
      videoUrl: '',
      videoPopupShow: false,
      // 视频后缀
      format: ['mp4', 'avi', 'mov'],
      fileList: []
    }
  },
  mounted() {
    this.getTaskDetail()
  },
  methods: {
    getTaskDetail() {
      // 获取任务详情
      Routine.Task.detail({ taskCode: this.$route.query.taskCode }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.fileList = []
          data.taskPicture.split(',').forEach(item => {
            this.fileList.push({
              url: this.$config.ImageURl + item
            })
          })
          this.formParams = data
          this.formParams.degreeConcern = data.taskPriority
          this.formParams.degreeConcernName = data.taskPriorityName
        }
      })
    },
    // 视频预览
    previewClick({ file }, detail) {
      const urlArr = this.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.fileList[detail.index].url
      }
    }
  }
}
</script>

<style></style>
